<template>
  <div ref="container"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { openWeb } from '/@/utils/webView';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores';
import { storeToRefs } from 'pinia';

const props = defineProps({
  htmlContent: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['dblclicked']);
const stores = useEmail(pinia);
const { foldRullList } = storeToRefs(stores);

const container = ref<HTMLElement | null>(null);

const handleDbClick = (event: any) => {
  emit('dblclicked', event);
};

const getDocument = (target: HTMLElement) => {
  let dom = target;
  while (dom.parentElement) {
    dom = dom.parentElement;
  }

  return dom;
};

const handleClick = (event: any) => {
  console.log(event.target);
  if (event.target.classList.contains('expand_btn')) {
    if (event.target.dataset.expand === 'true') {
    event.target.dataset.expand = 'false';
    } else {
    event.target.dataset.expand = 'true';
    }

    const dom = getDocument(event.target.parentElement);
    if (event.target.dataset.expand === 'true') {
      event.target.innerText = '收起引用';
      dom.getElementsByClassName('J-reply')[0].classList.add('show');
    } else {
      event.target.innerText = '展开引用';
      dom.getElementsByClassName('J-reply')[0].classList.remove('show');
    }
  } else {
    // 链接
    if (event.target.tagName.toLocaleLowerCase() === 'a' && event.target.href) {
      event.preventDefault();
      openWeb(event.target.href);
    }
  }
};

// 引用处理
const adapterContent = (content: string) => {
  console.log(foldRullList.value)
  const rule = foldRullList.value.find(item => content.includes(item.tag));
  if (!rule) {
    return content;
  }
  if (rule.type === 'class') {
    // /<\S+\s+\S+J-reply/
    const reg = new RegExp('<\\S+\\s+\\S+' + rule.tag);
    console.log(reg)
    console.log(reg.test(content))
    if (reg.test(content)) {
      console.log(reg.exec(content))
      const first = reg.exec(content)?.[0] as string;
      // console.log(first)
      console.log(first)
      content = content.replace(first, '<div class="expand_btn">展开引用</div>' + first);
      console.log(content)
      if (!rule.tag.includes('J-reply')) {
        const regClass = new RegExp(rule.tag, 'g');
        content = content.replace(regClass, rule.tag + ' J-reply');
      } 
    }
    // <([a-z]+)\b[^>]*\bclass="J-cc ntes-mailmaster-quote"[^>]*>([^>]*)<\/\1>
  } else if(rule.type === 'id') {
    debugger
  } else if (rule.type === 'style') {
    const reg = new RegExp('<\\S+\\s+\\S+' + rule.tag + '\"');
    if (reg.test(content)) {
      const first = reg.exec(content)?.[0] as string;
      content = content.replace(first, '<div class="expand_btn">展开引用</div>' + first + ' class="J-reply" ');
    }
  } else {
    console.error(`规则：${rule.type}还没有实现`);
  }
  // if (content.includes('<div class="J-reply ntes-mailmaster-quote"')) {
  //   content = content.replace('<div class="J-reply ntes-mailmaster-quote"', '<div class="expand_btn">展开引用</div><div class="J-reply ntes-mailmaster-quote"');
  // } else if (content.includes('<div class="J-cc ntes-mailmaster-quote"')) {
  //   content = content.replace('<div class="J-cc ntes-mailmaster-quote"', '<div class="expand_btn">展开引用</div><div class="J-cc ntes-mailmaster-quote"');
  // } else if (content.includes('<div id="ntes-pcmail-forward-content"')) {
  //   content = content.replace('<div id="ntes-pcmail-forward-content"', '<div class="expand_btn">展开引用</div><div id="ntes-pcmail-forward-content"');
  // } else if (content.includes('<blockquote style="margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.5em; margin-Right: inherit">')) {
  //   content = content.replace('<blockquote style="margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.5em; margin-Right: inherit">', '<div class="expand_btn">展开引用</div><blockquote style="margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.5em; margin-Right: inherit">');
  // }

  return content;
}

onMounted(() => {
  if (container.value) {
    const styles = `
      <style>
        @import url('/shadow.css');
      </style>
    `;
    const shadowRoot = container.value.attachShadow({ mode: 'open' });
    let content = props.htmlContent;
    content && (content = adapterContent(content));
    console.log(content)

    shadowRoot.innerHTML = `${styles}<div>${content}</div>`;
    shadowRoot.addEventListener('dblclick', handleDbClick);
    shadowRoot.addEventListener('click', handleClick);
  }
});

onBeforeUnmount(() => {
  if (container.value) {
    const shadowRoot = container.value.shadowRoot;
    if (shadowRoot) {
      shadowRoot.removeEventListener('dblclick', handleDbClick);
    }
  }
});
</script>